import React, { Component } from 'react';
import { Layout, Menu, Icon, Breadcrumb } from 'antd';

import { Http } from './common/Utils';
import route from './route';

import NotFound from './view/basic/NotFound';
import Login from './view/basic/Login';

import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    Switch
} from 'react-router-dom'


import './App.css';

const { Footer, Content, Sider, Header } = Layout;
const { SubMenu } = Menu;

class App extends Component {

    state = {
        collapsed: false,
        currentPath: '',
        currentTitle: '',
        user: {},
        menus: []
    };

    /**
     * 初始化,查询后台菜单
     */
    constructor(props) {
        super(props);

        if (window.location.pathname != '/login') {
            Http.Post('/api/manager/info.json').then((data) => {
                this.setState({
                    user: data
                });
            });

            Http.Post('/api/authority/resources.json').then((data) => {
                this.setState({
                    menus: data.list
                });
            });
        }
    }

    /**
     * 点击展开/缩小菜单树
     */
    onCollapse = (collapsed) => {
        this.setState({ collapsed });
    }

    /**
     * 渲染子节点菜单树
     */
    renderMenu = () => {
        return this.state.menus.map((item) => {
            return (
                <SubMenu
                    key={item.id}
                    title={<span><Icon type="appstore" /><span>{item.name}</span></span>}
                >
                    {item.children.map((c) => { return <Menu.Item key={c.uri}><Link to={c.uri}>{c.name}</Link></Menu.Item> })}
                </SubMenu>)
        });
    }

    /**
     * 渲染路由视图
     */
    renderRouteView = () => {
        return route.map((item) => {
            return <Route exact key={item.path} path={item.path} component={item.component}></Route>;
        });
    }

    /**
     * 左边菜单选择后触发,用于修改选择状态
     */
    onMenuSelect = (e) => {
        this.setState({
            currentPath: e.key,
        });
        this.updateBreadcrumb();
    }

    /**
     * 点击顶部右上角菜单
     */
    onHeaderMenuClick = (e) => {
        if (e.key === 'logout') {
            Http.Post('/api/manager/logout.json').then((data) => {
                this.router.history.push('/login');
            });
        } else if (e.key === 'changePwd') {
            this.router.history.push('/changePwd');
        }
    }

    /**
     * DOM绘画完成时触发
     */
    componentDidMount = () => {
        this.setState({
            currentPath: this.router.history.location.pathname
        });
        this.updateBreadcrumb();
    }

    /**
     * 更新面包屑上面的标题
     */
    updateBreadcrumb() {
        var path = this.router.history.location.pathname;
        var title = route.map(item => {
            if (item.path === path) {
                return item.title;
            }
        });
        if (title) {
            this.setState({
                currentTitle: title
            });
        }
    }

    render() {

        return (
            <Router ref={(router) => { this.router = router; }}>
                <Switch>
                    <Route exact path="/login" component={Login} />
                    <Route path="/" render={props => {
                        return (
                            <Layout style={{ minHeight: '100vh' }}>
                                <Sider
                                    collapsible
                                    collapsed={this.state.collapsed}
                                    onCollapse={this.onCollapse}
                                >
                                    <div className="logo" />
                                    <Menu theme="dark" mode="inline" ref={(menu) => this.menu = menu} inlineCollapsed={false} onClick={this.onMenuSelect} selectedKeys={[this.state.currentPath]}>
                                        {this.renderMenu()}
                                    </Menu>
                                </Sider>
                                <Layout>
                                    <Header style={{ background: '#fff', padding: 0, height: 47 }}>
                                        <Menu style={{ width: '160px', float: 'right' }} mode="horizontal" onClick={this.onHeaderMenuClick}>
                                            <SubMenu title={<span><Icon type="user" />{this.state.user.nicename}</span>}>
                                                <Menu.Item key="changePwd">修改密码</Menu.Item>
                                                <Menu.Item key="logout">退出登录</Menu.Item>
                                            </SubMenu>
                                        </Menu>
                                    </Header>
                                    <Content style={{ margin: '0 16px' }}>
                                        <Breadcrumb style={{ margin: '16px 0' }}>
                                            <Breadcrumb.Item>{this.state.currentTitle}</Breadcrumb.Item>
                                        </Breadcrumb>
                                        <div style={{ background: '#fff' }}>
                                            <Switch>
                                                {this.renderRouteView()}
                                                <Route path="" key="/404" component={NotFound} />
                                            </Switch>
                                        </div>
                                    </Content>
                                    <Footer style={{ textAlign: 'center' }}> XQuick React2018 Created by jleaf</Footer>
                                </Layout>
                            </Layout>
                        );
                    }}>
                    </Route>
                </Switch>
            </Router >
        );
    }
}

export default App;
